<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        body{
            margin:0;
            padding:0;
            background-color:#f7f7f7;
        }
        /*按钮*/
        .prev, .next{
            display:block;
            width:60px;
            height:60px;
            text-align:center;
            line-height:60px;
            margin-top:-30px;
            font-size:40px;
            color:#fff;
            text-decoration:none;
            background-color:rgba(0, 0, 0, 0.5);
            position:absolute;
            top:50%;
            z-index:999;;
        }
        .next{
            right:0;
        }
        .view{
            width:560px;
            height:300px;
            margin:100px auto;
            border:1px solid #ccc;
            position:relative;

        }
        *{
            margin:0px;
            padding:0px;
        }

        .view ul li{
             height: 300px;
            width: 112px;

            position: absolute;
            /*  儿子要做成立体，加载亲父元素上 */
            transform-style:preserve-3d;

            /*transform:rotateX(-30deg) rotateY(30deg);*/
            /* 过渡，谁动就加给谁 */
            transition: all 1s;
        }
        .view ul li span{
            height: 300px;
            width: 112px;
            display: block;
            position: absolute;

        }


        .view ul{
            list-style: none;
            width:560px;
            height:300px;
        }

        li:nth-child(2){
            left: 112px;
        }

        li:nth-child(3){
            left: 224px;
        }
        li:nth-child(4){
            left: 336px;
        }
        li:nth-child(5){
            left: 448px;
        }

        li>span:nth-child(1){
            /*   translate Z 轴位移 */
            transform: translateZ(150px);

            background: url('images/1.jpg');

        }

        /* 上面 */
        li>span:nth-child(2){
            /* rotateX 旋转  deg 角度 */
            transform: rotateX(90deg) translateZ(150px);
            background: url('images/2.jpg');
        }
        li>span:nth-child(3){
            transform: rotateX(180deg) translateZ(150px);
            background: url('images/3.jpg');
        }
        li>span:nth-child(4){
            transform: rotateX(270deg)  translateZ(150px);
            background: url('images/4.jpg');

        }
        li:nth-child(2) span{
            background-position: -112px 0;
        }
        li:nth-child(3) span{
            background-position: -224px 0;
        }
        li:nth-child(4) span{
            background-position: -336px 0;
        }
        li:nth-child(5) span{
            background-position: -448px 0;
        }

    </style>
</head>
<body>
<div class="view">
    <ul>
        <!-- 每一条 -->
        <li>
            <!-- 四个面 -->
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <!-- 四个面 -->
            <span></span> <span></span> <span></span> <span></span>
        </li>
        <li>
            <!-- 四个面 -->
            <span></span> <span></span> <span></span> <span></span>
        </li>
        <li>
            <!-- 四个面 -->
            <span></span> <span></span> <span></span> <span></span>
        </li>
        <li>
            <!-- 四个面 -->
            <span></span> <span></span> <span></span> <span></span>
        </li>
    </ul>

    <a href="javascript:;" class="prev">&lt;</a>
    <a href="javascript:;" class="next">&gt;</a>
</div>
<script src="./js/jquery.min.js"></script>

<script>
  $(function () {

      var tempIndex=0;
      $(".next").on("click",function () {
          tempIndex++;
        var lis= $(this).prev().prev().children("li");

          lis.each(function (index,ele) {
              console.log(ele);
              $(ele).css("transform","rotateX("+90* tempIndex+"deg)");
              $(ele).css("transition-delay",index+"s");
          })
        var aaa=0;
          lis.on("transitionend",function (inde,ele) {
             aaa++;
//              console.log("我被走完了");
              if(aaa%5==0){
                  console.log("真到了第5张");
                  lis.off("transitionend")
              }
          })

      })
  })
</script>
</body>
</html>